<template>
  <el-image-viewer v-show="dispV" :url-list="url" :on-close="close"/>
</template>

<script>
  // 导入组件
  import ElImageViewer from 'element-ui/packages/image/src/image-viewer'

  export default {
    name: 'showImageDialog',
    props: {
      url: {
        type: Array,
        default: function () {
          return ['https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/02/02/ChMkJlbKxWOIRxKoAAVChq3hCgEAALHVQBJ8IsABUKe444.jpg', 'https://img02.sogoucdn.com/app/a/100520020/ebdc830ef3ecedcea306c02cba235320']
        }
      },
      disp: {
        type: Boolean,
        default: function () {
          return false
        }
      }
    },
    components: { ElImageViewer },
    data () {
      return {
        dispV: this.disp,
      }
    },
    watch: {
      disp (val) {
        this.dispV = true
      }
    },
    methods: {
      close () {
        this.dispV = false
      }
    }
  }
</script>
